<template>
    <div>
        <div class="comment-nav">
            <van-icon name="arrow-left" @click="back" class="back" />
            <div class="title">商品评论</div>
        </div>
        <div>
            <div class="card-box" v-for="(i,index1) in conmentList" :key="index1">
                <div style="display: flex;">
                    <img class="user-img" :src="i.user_avatar" alt="">
                    <div class="name-box"> 
                        <p class="u-name">{{ i.user_name}}</p>
                        <p class="send-date">{{ i.add_time }}</p>
                    </div>
                </div>
                <div class="a-comment" v-html="i.comment_content"></div>
                <div class="imgs">
                    <div v-for="(j,index2) in i.comment_images" :key="index2" class="img-div" >
                        <img v-if="i.comment_images[0]" class="comment-img" :src="j" alt="" @click="showPopup(index1,index2)">
                    </div>
                </div>
            </div>
            <van-popup lazy-render v-model="show"><img class="show-img" :src='conmentList[index1]?.comment_images[index2]' alt=""></van-popup>
        </div>
        
    </div>
</template>
<script>
import {getCommentApi} from '../assets/api'
export default{
    data(){
        return{
           conmentList:'',
           pages:3,
           index1:'',
           index2:'',
           show:false
        }
    },
    methods:{
       async getComment(){
        let url = getCommentApi(this.pages,this.$route.params.id)
        let {data} = await this.$http(url)
           this.conmentList = data.data.comments
           console.log(this.conmentList);
       },
       back(){
        this.$router.go(-1)
       },
       showPopup(i1,i2) {
        console.log(this.conmentList[i1]?.comment_images[i2]);
        this.index1 = i1
        this.index2 = i2
       this.show = true;
       },
    },
    mounted(){
        this.getComment()
    }
}
</script>

<style lang="scss" scoped>
 .card-box{
    width: 100vw;
    padding: 4vw 0 5vw 5vw;
    margin: 3vw 5vw 0 0;
    border-bottom: 1px solid #efefef;
    .user-img{
        height: 4.5vh;
        width: 4.5vh;
        border-radius: 999px;
        margin: 2vw 0 0 0;
    }
    .name-box{
        margin: -3.5vw 0 0 3vw;
        .user-name{
            font-weight: bold;
        }
        .send-date{
            color: #7f7f7f;
            margin: -3vw 0 0 0;
            font-size: 10px;
        }
    }
    .a-comment{
        margin: 1vh 0 1vh 0;
        width: 90%;
        // height: 5vh;
        // overflow: hidden;
        // text-overflow: ellipsis;
        font-size: 12px;
        color: #7f7f7f;
    }
    .comment-img{
        border-radius: 10px;
        margin: 2vw 0 0 0 ;
        width: 18vw;
        height: 18vw;
    }
}
.comment-nav{
    .title{
        margin: 1vh 0 0 30vw;

    }
    .back{
        margin: 2vh 0 0 3vw;
    }
    font-size: 20px;
    display: flex;
}
.imgs{
    display: flex;
    flex-wrap: wrap;
    .img-div{
        margin: 0 3vw 0 0;
    }
}
    .show-img{
        height: 60vh;
        width: 60vw;
    }
</style>